<template>
	<view style="height: 100%;width: 100%;overflow: scroll;background-color: #F7FCFF;">
		<u-navbar title="线索详情">
			<view slot="right" style="margin-right: 40upx;">
				<u-icon name="more-dot-fill" color="#333333" size="30"></u-icon>
			</view>
		</u-navbar>
		<view class="content">
			<view class="font-30" style="color: #FFFFFF;text-align: center;margin-top: 63upx;">{{ list.wechat }} {{ list.title }} {{ list.mobile }}</view>
			<view class="font-24" style="color: #FFFFFF;text-align: center;margin-top: 22upx;">当前状态：{{ list.status }}</view>
		</view>
		<view class="content-xs">
			<view class="font-30-color" style="margin-top: 29upx;margin-left: 25upx;">
				<text class="_imgs"></text>
				<text><u-icon name="order" color="#2979ff" size="35" style="margin-right: 5px;"></u-icon>线索详情</text>
			</view>
			<view class="content-xs-line">
				<view>
					<view class="content-list-detail">
						<view class="list-left">性别</view>
						<view class="list-right">{{ list.sex_cn }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">处理时间</view>
						<view class="list-right">{{ list.sex_cn }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">年龄</view>
						<view class="list-right">{{ list.age }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">微信</view>
						<view class="list-right">{{ list.wechat }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">在读年级</view>
						<view class="list-right">小学三年级</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">所在地</view>
						<view class="list-right">{{ list.province_name }}/{{ list.city_name }}/{{ list.area_name }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">意向专业</view>
						<view class="list-right">{{ list.category_name_one }}-{{ list.category_name_two }}-{{ list.category_name_three }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">学习目标</view>
						<view class="list-right">{{ list.study_target }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">关心问题</view>
						<view class="list-right">{{ list.concerns }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">咨询其他机构</view>
						<view class="list-right">{{ list.is_consult == 0 ? '否' : '是' }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">分发机制</view>
						<view class="list-right">{{ list.send_count_text }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">当前情况</view>
						<view class="list-right">这孩子想学爸妈支持钱不是问题</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">竞品机构</view>
						<view class="list-right">{{ list.competitor }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">备注</view>
						<view class="list-right">{{ list.remark }}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;justify-content: space-around;margin-top: 960upx;">
			<view class="left-image" @click="openGz">工单反馈</view>
			<view class="right-image" @click="openXs">线索跟踪</view>
		</view>
		<view style="margin-top: 60upx;">
			<view style="font-size: 30upx;color: #0081F1;font-weight: bold;padding:0 40upx;">跟踪记录<u-icon name="list-dot" style="float: right;" color="#2979ff" size="35"></u-icon></view>
			<view class="list-contain">
				<view class="list-contain-Trackrecord">
					<u-row gutter="16">
						<u-col span="2.5">
							<view class="bg-purple" style="background-color: #0182F1;">已报名</view>
						</u-col>
						<u-col span="6.5">
							<view class="bg-purple-light1">回访人: 周大明</view>
						</u-col>
						<u-col span="3">
							<view class="bg-purple-light1" style="text-align: right; color: #0182F1;">30000元</view>
						</u-col>
						<u-col span="12">
							<view class="bg-purple-light2">操作时间: 2021.04.12 16:34:10</view>
						</u-col>
						<u-col span="12">
							<view class="bg-purple-light3">备注:后续，家长在我的强烈劝说下终于冷静了，决定先预约了解下情况。</view>
						</u-col>
					</u-row>
				</view>
				<view class="list-contain-Trackrecord">
					<u-row gutter="16">
						<u-col span="2.5">
							<view class="bg-purple">已预约</view>
						</u-col>
						<u-col span="9.5">
							<view class="bg-purple-light1">回访人: 周大明</view>
						</u-col>
						<u-col span="12">
							<view class="bg-purple-light2">操作时间: 2021.04.12 16:34:10</view>
						</u-col>
						<u-col span="12">
							<view class="bg-purple-light3">备注:后续，家长在我的强烈劝说下终于冷静了，决定先预约了解下情况。</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<popupXxgz ref="child" @getList="getFollowDetail"></popupXxgz>
		<popupGzbg ref="childGz"></popupGzbg>
		<bottom/>
	</view>
</template>

<script>
	import popupXxgz from '../../components/popup-xxgz/index.vue'
	import popupGzbg from '../../components/popup-gzbg/index.vue'
	import bottom from '../../components/bottom/index.vue'
	export default{
		components:{ popupXxgz, popupGzbg, bottom },
		data () {
			return {
				id: '',
				clue_agency_id: '',
				list: {}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.clue_agency_id = e.clue_agency_id
		},
		mounted() {
			this.getDetail()
			this.getFollowDetail()
		},
		methods:{
			openXs () {
				this.$refs.child.getOpen(this.id, this.clue_agency_id)
			},
			openGz () {
				this.$refs.childGz.getOpen()
			},
			getDetail() {
				this.$request('', '/agencyApi/v1/agencyClueLine', 'GET', {
					id: this.id
				}, {
				}).then(res => {
					switch (res.data.status) {
						case 0:
						res.data.status = '待处理'
						break;
						case 1:
						res.data.status = '无意向'
						break;
						case 2:
						res.data.status = '考虑中'
						break;
						case 3:
						res.data.status = '已预约'
						break;
						case 4:
						res.data.status = '已试听'
						break;
						case 5:
						res.data.status = '已报名'
						break;
						case 6:
						res.data.status = '疑似报名'
						break;
					}
					this.list = res.data
					// console.log(res.data)
				})
			},
			getFollowDetail() {
				this.$request('', '/agencyApi/v1/clueFollowupList', 'GET', {
					clue_agency_id: this.clue_agency_id,
					clue_id: this.id,
					page: 1,
					limit: 10
				}, {
				}).then(res => {
					// this.list = res.data
					console.log(res.data)
				})
			}
			// get(){
			// 	uni.navigateTo({
					
			// 	})
			// }
		}
	}
</script>

<style lang="less" scoped>
	.list-contain-Trackrecord{
		background-color: #fff;
		padding: 30upx 20upx;
		border-radius: 10upx;
		margin-bottom: 30upx;
	}
	.list-contain-Trackrecord .bg-purple{
		color: #fff;
		padding: 4upx 10upx;
		text-align: center;
		border-radius: 3px;
		background-color: #F08200;
	}
	.list-contain-Trackrecord .bg-purple-light1{
		font-size: 31upx;
		font-weight: bold;
	}
	.list-contain-Trackrecord .bg-purple-light2{
		margin: 10upx 0;
		color: #ABABAB;
	}
	.list-contain-Trackrecord .bg-purple-light3{
		font-size: 29upx;
		color: #333333;
		text-align: justify;
	}
	.list-contain{
		width: 681upx;
		margin: 0 auto;
		margin-top: 20upx;
	}
	.left-image{
		width: 270upx;
		height: 106upx;
		background-image: url(../../static/hjx.png);
		background-size: 100% 100%;
		color: #FFFFFF;
		font-size: 26upx;
		text-align: center;
		line-height: 106upx;
	}
	.right-image{
		width: 270upx;
		height: 106upx;
		background-image: url(../../static/ljx.png);
		background-size: 100% 100%;
		color: #FFFFFF;
		font-size: 26upx;
		text-align: center;
		line-height: 106upx;
	}
	.content-list-detail:nth-last-child(1) .list-right{
		border-bottom: 0;
	}
	.content-list-detail{
		display: flex;
		height: 66upx;
		width: 100%;
		line-height: 66upx;
		// text-align: center;
		.list-left{
			width: 187upx;
			height: 66upx;
			background-color: rgb(31,157,250);
			// text-align: center;
			line-height: 66upx;
			color: #FFFFFF;
			padding-left: 10upx;
			overflow: hidden;/*超出部分隐藏*/
			white-space: nowrap;/*不换行*/
			text-overflow:ellipsis;/*超出部分文字以...显示*/
			font-size: 26upx;
		}
		.list-right{
			width: 430upx;
			height: 66upx;
			line-height: 66upx;
			// text-align: center;
			overflow: hidden;/*超出部分隐藏*/
			white-space: nowrap;/*不换行*/
			text-overflow:ellipsis;/*超出部分文字以...显示*/
			padding-left: 10upx;
			font-size: 26upx;
			border-bottom: 1px solid #D2D2D2;
		}
	}
	.content-xs-line{
		width: 620upx;
		// height: 921upx;
		border: 1upx solid #D2D2D2;
		border-radius: 10upx;
		margin: 0 auto;
		margin-top: 29upx;
		margin-bottom: 25upx;
	}
	._imgs{
		width: 36upx;
		height: 38upx;
		border: 1upx solid #F8F8F8;
	}
	.font-30-color{
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0081F1;
	}
	.content-xs{
		width: 90%;
		// height: 700upx;
		border: 1px solid #DCDFE6;
		margin: 0 auto;
		position: absolute;
		top: 300upx;
		margin-left: 5%;
		background-color: #FFFFFF;
		border-radius: 10upx;
	}
	.content {
		height: 387upx;
		width: 100%;
		overflow: scroll;
		background-image: url(../../static/back.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// display: flex;
		// flex-direction: column;
		.site-header{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding-left: 29upx;
			padding-right: 29upx;
			margin-top: 45upx;
			.site-header-left{
				color: #FFFFFF;
				.site-header-font{
					font-size: 24upx;
				}
			}
		}
		.subtransactions-header{
			width: 100%;
			display: flex;
			// justify-content: space-between;
			padding-left: 29upx;
			padding-right: 29upx;
			margin-top: 130upx;
			color: #FFFFFF;
		}
	}
</style>
